<!--
 * @Author: hongjianfeng
 * @Date: 2023-07-31 11:16:13
 * @LastEditTime: 2023-08-15 14:04:36
 * @Description: 
 * @FilePath: \info\web\detail.html
-->
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> -->
    <title></title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <link rel="stylesheet" href="detail.css"/>
  </head>
  <body>
    
    <div id="unity-app" >
      <div class="btn-wrap1 comm-fixed-bottom acea-row row-column">
      <div  v-if="cj == 2 || cj == 4" class="record-popup" :class="recordPopupShow ? 'act' : ''">
        <div class="inner-content">
          <div class="title">正在录制音频</div>
          <div
            class="voice-line-wrap" v-if="recording">
            <div class="voice-line one"></div>
            <div class="voice-line two"></div>
            <div class="voice-line three"></div>
            <div class="voice-line four"></div>
            <div class="voice-line five"></div>
            <div class="voice-line six"></div>
            <div class="voice-line seven"></div>
            <div class="voice-line six"></div>
            <div class="voice-line five"></div>
            <div class="voice-line four"></div>
            <div class="voice-line three"></div>
            <div class="voice-line two"></div>
            <div class="voice-line one"></div>
          </div>
          <div class="cancel-icon" v-if="!recording">+</div>
          <div class="tips">{{ recording ? '左右滑动后松手完成录音' : '松手取消录音' }}</div>
        </div>
      </div>
      <image v-if="cj == 2" id="btnRecording"  class="btn-bot-img" src="http://8.141.90.108:1533/images/bt-bg2.png"></image>
    </div>
    </div>
    
    <script src="./vue.js"></script>
    <!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript" src="./uni-webview-js.js"></script>
    <script type="text/javascript" src="./axios.js"></script>
    <script type="text/javascript" src="./record.js"></script>
    <script src="./detail.js"></script>
    <script>
      
      window.onload = function(){
        setTimeout(()=>{
          let recorder = new Recorder({
              type:"wav",   //此处的type类型是可修改的
              bitRate:16,      
              sampleRate:16000,
              bufferSize:8192,
          })
          let timer = null
          let startTouchData = {
            clientX:0,
            clientY:0
          }
          var recordBtn = document.getElementById("btnRecording");
          // var btnStopRecording = document.getElementById("btn-stop-recording");
          // btnStartRecording.onclick = function () {
          //   // recoderCallBack(22)
          //   recorder.start();
          // }
          // btnStopRecording.onclick = function () {
          // alert(111)
          //   recorder.stop();
          //   alert(recorder.duration);
          //   alert(recorder.getMP4Blob())
          // }
          recordBtn.addEventListener('touchstart', function (e) {
              console.log('touchstart');
              event.stopPropagation();
              event.preventDefault();
              recoderStartCallBack()
              // if(recorder){
              //   recorder.stop();
              //   recorder=null;
              // }
              startTouchData.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标
              startTouchData.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
              timer = setTimeout(function () {
                recorder.start();
              }, 300);
          });
  
          recordBtn.addEventListener('touchmove', function (e) {
            console.log(222,e);
            let touchData = e.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
            let moveX = touchData.clientX - startTouchData.clientX;
            let moveY = touchData.clientY - startTouchData.clientY;
            recoderMoveCallBack(moveY)
          
            timer = setTimeout(function () {
              clearTimeout(timer);
              timer = null;
            });
          });

          recordBtn.addEventListener("touchend", function (e) {
            console.log('touchend');
            
            // if(recorder){
            //     return;
            // }
            // recorder.pause();
            // alert(JSON.stringify(recorder))
            var blob = recorder.getWAVBlob();
            console.log('touchend',blob,vm);
            let formData = new FormData();
            formData.append("file",blob,'mp4');
            console.log(formData);
            vm.timer = setTimeout(()=>{
              vm.recording =  false // 录音中
            },220)
            vm.recordPopupShow =  false// 录音弹窗
            let config= {
              headers: {
                'Authorization':'Bearer '+ vm.params.token,
                "Content-Type": "multipart/form-data"
              }
            };
            alert(JSON.stringify(blob))
            alert(JSON.stringify(formData))
            axios.post(vm.APIThird+'/tencent/cloud/voiceToWord?language=' + Number(vm.params.language), formData, config)
            .then(function (res) {
              alert(JSON.stringify(res))
              if(res.data.code === 200){
                vm.handleTranslate(res.data.word.split(''))
              }else{
                vm.Toast(res.data.message)
              }
            })
            .catch(function (error) {
              alert(JSON.stringify(error))
              console.log(error);
            });
            // vm.recoderEndCallBack(blob)
            clearTimeout(timer);
            recorder.stop();
            return false;
          });
        },1000)
        
      }
    </script>
  </body>
</html>
